<html>
	</head>
	</head>
	<body>
		<canvas id="myCanvas" align = "center" width="800" height="600"></canvas>
		<script>
		var x = 0.0;
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d")
/*		ctx.globalAlpha = 0.8;
		function drawEllipse(ctx, r, x, y, c)
		{
			ctx.beginPath();
			
			for ( var i = 0.0; i <= 2 * Math.PI; i += 0.01 )
			{
				ctx.lineTo( r * Math.cos(i) + x, r * Math.sin(i) + y);
			}		
			ctx.fillStyle = c;
			ctx.stroke();
			ctx.fill();
		}
		
		function play()
		{
			ctx.clearRect(0.0, 0.0, canvas.width, canvas.height);
			ctx.save();
			ctx.translate( canvas.width / 2, canvas.height / 2 );
			ctx.rotate(x);
			drawEllipse(ctx, 20.0 , -50.0, 0.0, "#ff0000");
			drawEllipse(ctx, 20.0 , 0, 0, "#00ff00");
			drawEllipse(ctx, 20.0 , 50.0, 0, "#ffff00");
			ctx.restore();
			
			x += 0.1;
		}
		
		setInterval("play()", 33);*/
		function drawStar(ctx, l, x, y, c)
		{
			ctx.beginPath();
			
			for ( var i = -Math.PI / 2; i < 4.0 * Math.PI; i += 4.0 / 5.0 * Math.PI )
			{
				ctx.lineTo( l * Math.cos(i) + x, l * Math.sin(i) + y);
			}		
			ctx.fillStyle = c;
			ctx.fill();
		}
		
		function drawFlag(ctx, x, y, w, h)
		{
			ctx.fillStyle = "#ff0000";
			ctx.fillRect(x, y, w, h);
			drawStar(ctx, 25.0, x + 40.0, y + 50.0, "#ffff00"); 
			drawStar(ctx, 8.0, x + 80.0, y + 25.0, "#ffff00"); 
			drawStar(ctx, 8.0, x + 95.0, y + 40.0, "#ffff00"); 
			drawStar(ctx, 8.0, x + 95.0, y + 60.0, "#ffff00"); 
			drawStar(ctx, 8.0, x + 80.0, y + 75.0, "#ffff00"); 
		}
		
//		ctx.translate( canvas.width / 2, canvas.height / 2 );
//		drawStar(ctx, 40.0, 0.0, 0.0, "#ffff00");
		
		drawFlag(ctx, 100.0, 100.0, 288.0, 192.0);
	
		</script>
	</body>
</html>